<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>漫画管理</title>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
    <script src="lib/jQuery/jQuery.mini.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/base.css">
    <link rel="shortcut icon" href=" m.favicon.ico" />
</head>

<body>
    <div class="header">
        <!-- 网站logo -->
        <a href="../home/default.html"><div class="left hl fl"><img src="https://i0.hdslb.com/bfs/vc/fb9521333b8ea79d90bdfc6da31cf83c52d93ec9.png" alt="">
            <p>好看漫画</p>
        </div></a>
        <div class="right hr fl">
            <!-- 下拉菜单 用户信息与退出登录 -->
            <div class="btn-group">
                <button type="button" class="btn btn-danger red-button">用户名</button>
                <button type="button" class="btn btn-danger dropdown-toggle red-button" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="user-edit.html">个人资料</a></li>
                    <li><a href="login.html">退出登录</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="content">
        <!-- 侧边栏 -->
        <div class="left cl fl">
            <ul class="menu list-unstyled">
                <li class="two">
                    <a class="item active" href="user.html">
                        <span class="glyphicon glyphicon-user"></span>
                        用户管理
                    </a>
                </li>
                <li class="one">
                    <a class="item" href="article.html">
                        <span class="glyphicon glyphicon-th-list"></span>
                        漫画管理
                    </a>
                </li>
            </ul>

        </div>
        <div class="right cr fl">
            <!-- 分类标题 -->
            <div class="title">
                <h4>漫画</h4>
                <span>找到1篇漫画</span>
                <a href="article-edit.html" class="btn btn-primary new">发布新漫画</a>
            </div>
            <!-- /分类标题 -->
            <!-- 内容列表 -->
            <table class="table table-striped table-bordered table-hover custom-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>标题</th>
                        <th>发布时间</th>
                        <th>作者</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>5b9a716cb2d2bf17706bcc0a</td>
                        <td>JavaScript基础一：基本介绍</td>
                        <td>2020-12-23</td>
                        <td>黑马讲师</td>
                        <td>
                            <a href="article-edit.html" class="glyphicon glyphicon-edit"></a>
                            <i class="glyphicon glyphicon-remove" data-toggle="modal" data-target=".confirm-modal"></i>
                        </td>
                    </tr>
                    <tr>
                        <td>5b9a716cb2d2bf17706bcc0a</td>
                        <td>JavaScript基础二：代码书写位置</td>
                        <td>2020-12-24</td>
                        <td>黑马讲师</td>
                        <td>
                            <a href="article-edit.html" class="glyphicon glyphicon-edit"></a>
                            <i class="glyphicon glyphicon-remove" data-toggle="modal" data-target=".confirm-modal"></i>
                        </td>
                    </tr>
                    <tr>
                        <td>5b9a716cb2d2bf17706bcc0a</td>
                        <td>JavaScript基础三：代码注释</td>
                        <td>2020-12-25</td>
                        <td>黑马讲师</td>
                        <td>
                            <a href="article-edit.html" class="glyphicon glyphicon-edit"></a>
                            <i class="glyphicon glyphicon-remove" data-toggle="modal" data-target=".confirm-modal"></i>
                        </td>
                    </tr>
                </tbody>
            </table>
            <!-- /内容列表 -->
            <!-- 分页符 -->
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
            <!-- 删除确认弹出框 -->
    <div class="modal fade confirm-modal">
        <div class="modal-dialog modal-lg">
            <form class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    <h4 class="modal-title">请确认</h4>
                </div>
                <div class="modal-body">
                    <p>您确定要删除这篇漫画吗?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <input type="submit" class="btn btn-primary">
                </div>
            </form>
        </div>
    </div>
    <!-- /删除确认弹出框 -->
        </div>
    </div>
    <div style="clear: both;"></div>

</body>

</html>